<template>
  <!-- :class="{error=!isok}" -->
    <!-- class的对象形式写法 -->
  <input class="input" :class="{error:!isok}" :type="type" :placeholder="palceholder" @input="dataChange" />
</template>

<script>
export default {
  props: [
      "type",
      'palceholder',
      'rule',
      'ree_message'
  ],
    data(){
        return{
            isok :'true'
        }
    },
    methods :{
       dataChange($event){
           // 在点击的时候我们可以获取得到当前的点击事件 $event
        //     $event.target.value 是数据
           if(!$event.target.value){

               this.isok = true;
           }else{
            //    正则表达式
               var regexp = new RegExp(this.rule)
            //    test测试是否匹配正则表达式方法，返回true或false
               this.isok = regexp.test($event.target.value)
           };
           if(!this.isok){
               console.log(this.ree_message);
               
           }
        //    数据有变化时事件往父级传
           this.$emit('input',$event.target.value)
           
       } 
    }
};
</script>

<style scoped lang="less">
.input {
  margin-bottom: 5.556vw;
  width: 100%;
  height: 10.556vw;
  padding: 5.556vw;
  box-sizing: border-box;
  background: #fff;
  border: none;
  border-bottom: 1px #666 solid;
  outline: none;
}
.error {
  border-color: red;
}
</style>